'Email me when in stock' functionality

How-To: 'Email me when in stock' functionality

Important note for developers and shop owners who use bespoke templates:

This functionality is only available for templates that have the generic template version id=2 or greater. Please see Template Version Control for more information on the generic template version.

Required shop settings

1. Stock Control is enabled either for the product or product option

2. The 'Disable Purchasing of Products out of Stock' check box is ticked

How it works

1. A user visits the Product Details page


2. If a product (or product option) is out of stock, instead of the 'Buy' button the 'Notify when in stock' button is shown
 


3. On the button click the 'Email me when in stock' page is opened in a new browser window


4. On the 'Submit' button click, an enquiry email is sent to the shop owner

How to add this functionalty to the site?

1. Go to Manage Website > Edit Website

2. Select the Home page in the Website Map tree and click on the Add Page button

3. In the Add Page window enter 'Email me when in stock' in the Page Name field and select the 'Enquiry Pages' radio button.

4. Click Done.


4. Select the 'Email me when in stock' page in the Website Map tree and switch to the Edit Page tab. Remove all page sections, except for the Enquiry Form, Disclaimer and Powered by sections. Then drag a HTML section and place it under the Enquiry Form section
 


5. Open the HTML page section in edit mode and enter the following javascript code:

<script type="text/javascript">
var productName = opener.getProductName( );
var productOption = opener.getProductOption( );
var note = "Please let me know when " + productName + "(" + productOption + ") is in stock again and can be purchased."
$(".enquirySection form input[name=title]").val(productName);
$(".enquirySection form textarea").val(note);
</script>

6. Place a Text and Image page section under the Enquiry Form section and enter some introductory text (if required). For example, "Thank you for your interest in our products. Please enter your details and we will contact you when this item is back in stock.". Save changes.

7. Select the Confirmation page (under the Email me when in stock page) in the Website Map tree. Remove all page sections, except for the Text And Image, Disclaimer and Powered by sections. Open the Text And Image section in edit mode and enter some text (if required). For example, "Thank you for your enquiry.". Save changes.
 


8. Select the Product Details page in the Website Map tree

9. Drag a HTML page section to the Product Details page and place it under the Product Details page section
 

10. Open the HTML page section in edit mode and enter the following javascript code:

<script type="text/javascript">
$(document).ready(function(){
    if ($(".productPriceBlock .smallBtn").hasClass("opacity")){
        var priceBlock = $(".productPriceBlock").html();
        button = '<a class="email" title="Email me when in stock" onclick="window.open(\'/engine/shop/enquiry/Email+me+when+in+stock\', \'\',  \' toolbar=no status=no, scrollbars=no, resizable=no, width=700, height=550\')"><input class="bigBtn" value="Notify when in stock" type="button"  /></a>';
        $(".productPriceBlock").html(button + priceBlock);
            $(".productPriceBlock .qty").css("display", "none");
    }
});
$(document).ajaxStop(function() {
    if ($(".productPriceBlock .smallBtn").hasClass("opacity")){
        if($(".email").html() == null ){
        var priceBlock = $(".productPriceBlock").html();
        button = '<a title="Email me when in stock" onclick="window.open(\'/engine/shop/enquiry/Email+me+when+in+stock\', \'\',  \' toolbar=no status=no, scrollbars=no, resizable=no, width=700, height=550\')"><input class="bigBtn" value="Notify when in stock" type="button"  /></a>';
        $(".productPriceBlock").html(button + priceBlock);
               $(".productPriceBlock .qty").css("display", "none");
        }

    }
    else {
            $(".productPriceBlock .qty").css("display", "inline");
        $("input[value='Notify when in stock']").css("display", "none");
    }
});
var productName=$("h1.productName").html();
var productOption = $(".productOptionsBlock select option:selected").text();
function getProductName(){
    return productName;
}
function getProductOption(){
    return productOption;
}
</script>

11. If needed, the Email me when in stock page can be removed from the Main Menu. See Can I control what pages appear in the Main Menu? for more details

12. Publish the site for the changes to be applied online.

You as the merchant will receive an email when a potential customer has completed the 'Email me when in stock' form including details of the prospective customer's name and the product they require.

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.