Graphicz
web design
blog

Call 01323 872296


Pop up from component in Sellerdeck showing product in a lightbox

This is how to show a pop up from component in Sellerdeck showing product in a Lightbox by ccking a [+] type symbol next to the component.

You can see an example of this at: www.graphicz.solutions/component/acatalog/Solitaire-Diamond-Ring-3.html Click Magnifier icon the next to the component and see.

To do this we are using jQuery’s .load function (http://api.jquery.com/load/) to load a product page  into a Lightbox-like popup. Rather than loading the full HTML page, we can use the capability of .load to load only a portion of the page designated by a jQuery selector ( ie: a DIV with class: div class=”whatever” ).

Firstly let’s demonstrate the principle, here is an example: https://www.graphicz.solutions/jquery-load-div/ The page opens as the example from http://api.jquery.com/load/. Demo 3 has a magnifier showing the div from demo2 in a fancybox.

Examples at https://www.graphicz.solutions/jquery-load-div/

Let’s look at the basic code

<ol id="new-projects"></ol>
<script>
$( "#new-projects" ).load( "load.html #projects li" );
</script>

load.html code:

<div id="projects">
<li>jQuery</li>
<li>jQuery UI</li>
<li>jQuery Mobile</li>
<li>QUnit</li>
<li>Sizzle</li>
</div>

 

Code with a div:

<b>Projects:</b>
<div id="marsupials"></div>

<script>
$( "#marsupials" ).load( "load2.html .descriptionstuff" );
</script>

 

load2.html

<div class="descriptionstuff">
<h2>Wombat</h2>
<img src="wombat.jpg" alt="Wombat" width="400" height="413" />
<p><strong>Wombats</strong>&nbsp;are short-legged, muscular&nbsp;quadrupedal&nbsp;marsupials&nbsp;that are native to&nbsp;Australia. They are about 1&nbsp;m (40&nbsp;in) in length with small, stubby tails. There are three extant species and they are all members of the&nbsp;familyVombatidae. They are adaptable and habitat tolerant, and are found in forested, mountainous, and&nbsp;heathland&nbsp;areas of south-eastern Australia, including Tasmania, as well as an isolated patch of about 300&nbsp;ha (740 acres) in&nbsp;Epping Forest National Park[2]&nbsp;in central Queensland.</p>
<p><span id="Evolution_and_taxonomy"><strong>Evolution and taxonomy</strong></span></p>
<p>Though genetic studies of the Vombatidae have been undertaken, evolution of the family is not well understood. Wombats are estimated to have diverged from other Australian marsupials relatively early, as long as 40 million years ago, while some estimates place divergence at around 25&nbsp;million years.&nbsp;While some theories place wombats as miniaturised relatives of diprotodonts, such as the rhinoceros-sized&nbsp;Diprotodon, more recent studies place the Vombatiformes as having a distinct parallel evolution, hence their current classification as a separate family.</p>
</div>

 

Code with a div and fancybox:

<p>View the project - <a class="fancybox" href="#marsupials" title="marsupials"><img src="magnifier.png" alt="magnifier" width="40" height="40"></a></p>

<div id="marsupials" style="display: none;"></div>

<script>
$( "#marsupials" ).load( "load2.html .descriptionstuff" );
</script>

 

Download example files: https://www.graphicz.solutions/jquery-load-div.zip

Or view source and save; Fancybox stuff from: http://fancyapps.com/fancybox/

Taking this into SD shouldn’t now be too hard.

The answer with Sellerdeck seems to be to use a mixture of jquery .load and the comprehensive built in battery of AssociatedProduct variables.

In the design library find the component layouts and copy the Standard Component Layout calling it Standard Component Layout Popup.

Here is the content:

<actinic:block php="true">
global $sCompCheckBox;    
$sCompCheckBox = "";

global $bHideOutOfStock;
$bHideOutOfStock = (<actinic:variable name="StockMode" selectable="false" /> == 1 AND <actinic:variable name="IsPermutationHidden" selectable="false" />);
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsComponentCheckboxShown%22%20%2f%3e">
   <input type="checkbox" name="<Actinic:Variable Name="UIWidgetName"/>" class="ajs-comp <actinic:block if="%3cactinic%3avariable%20name%3d%22IsUsedAssociatedProduct%22%20%2f%3e" >rts_<actinic:variable name="AssociatedProduct::ProductID" />_</actinic:block>"
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSelectedByDefault%22%20%2f%3e">checked="checked"</actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20true" >onclick="ChoiceChanged(this)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20FALSE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onclick="ChoiceChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onclick="ChoiceChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, <actinic:variable name="ShopID" />)"</actinic:block> /> <actinic:block php="true" if="1" >    $sCompCheckBox = "<actinic:variable name="UIWidgetName" />"; </actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsComponentHiddenFieldIncluded%22%20%2f%3e">
   <input type="hidden" name="<Actinic:Variable Name="UIWidgetName"/>" class="ajs-comp <actinic:block if="%3cactinic%3avariable%20name%3d%22IsUsedAssociatedProduct%22%20%2f%3e" >rts_<actinic:variable name="AssociatedProduct::ProductID" />_</actinic:block>" value="on" />
</actinic:block>
<label><Actinic:Variable Name="ComponentDisplayLabel"/> at £<actinic:variable name="AssociatedProduct::ProductPriceRaw" /><a class="fancybox" href="#<actinic:variable name="AssociatedProduct::ProductID" />_pop" title="<actinic:variable name="AssociatedProduct::ProductName" />"><img style="float:right;margin-left:8px;" src="magnifier.png" alt="magnifier" width="28" height="28"></a></label><actinic:block if="%28%3cactinic%3avariable%20name%3d%22StockMode%22%20%2f%3e%20%3d%3d%201%20AND%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aProductID%22%20%2f%3e%20%21%3d%20%27%27%20AND%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aIsStockMonitored%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aStockLevel%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aStockSuspendLevel%22%20%2f%3e%29" >
    <actinic:variable name="OutOfStock" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ComponentRetailCustomerMessage%22%20%2f%3e%20%21%3d%20%22%22">
<Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable Name="ProductID" />" COMPONENTID=<actinic:variable name="ComponentIndex" />><actinic:variable name="ComponentRetailCustomerMessage" /></Actinic:PRICE_EXPLANATION><br />
</actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ComponentCount%22%20%2f%3e%29">
    <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationCount%22%20%2f%3e%20%3e%200">
        <actinic:variable name="ComponentAttributeList" />
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationCount%22%20%2f%3e%20%3d%3d%200" >
        <actinic:variable name="AttributeList" />
    </actinic:block>
</actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%21%3d%200%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ComponentCount%22%20%2f%3e%29">
    <actinic:variable name="AttributeList" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPriceGridShownForComponents%22%20%2f%3e" >
    <actinic:variable name="PermutationLayout" value="Permutation Grid" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e" >
    <textarea id="idTa_<actinic:variable name="ProductID" />_Saved" cols="10" rows="10" style="display: none;"></textarea>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22ComponentCount%22%20%2f%3e%20%3e%200" >
        <actinic:variable name="ProductJavascriptLayout" />
    </actinic:block>
</actinic:block>

<div id="<actinic:variable name="AssociatedProduct::ProductID" />_pop" style="width:400px;display: none;text-align:center;">
<h2><actinic:variable name="AssociatedProduct::ProductName" /></h2>
<img src="<actinic:variable name="AssociatedProduct::ProductImageFileName" />" alt="<actinic:variable name="AssociatedProduct::ProductName" />" >
<p><actinic:variable name="AssociatedProduct::ProductDescription" /></p>
<div id="<actinic:variable name="AssociatedProduct::ProductID" />_Custom1"></div>
<div id="<actinic:variable name="AssociatedProduct::ProductID" />_Custom2"></div>
<p>Price: £<actinic:variable name="AssociatedProduct::ProductPriceRaw" /></p>
<p><a href="<actinic:variable name="AssociatedProduct::ProductPageName" />">Visit Page</a></p>
</div>
<script>
$( "#<actinic:variable name="AssociatedProduct::ProductID" />_Custom1" ).load( "<actinic:variable name="AssociatedProduct::ProductPageName" /> .customcontent1" );
$( "#<actinic:variable name="AssociatedProduct::ProductID" />_Custom2" ).load( "<actinic:variable name="AssociatedProduct::ProductPageName" /> .customcontent2" );
</script>

Some of the hidden div content is using existing variables but say the product has some custom variable stuff (tabs or whatever) that can be brought in using jquery .load.
I have two lumps of custom content with classes customcontent1 and customcontent2 which can be seen at: https://www.graphicz.solutions/component/acatalog/Amethyst-Heart-Necklace-25.html

Now in content tree make a new component for your product using the settings as shown and choose your new layout for the component layout:

Pop up from component in Sellerdeck showing product in a lightbox

You will need to add the fancybox scripts and styles to the site folder and reference them in the javascript header functions.

And that is about it. See it work at: http://www.graphicz.solutions/compon…nd-Ring-3.html

It seems to work and if ticked the additional products get added to the cart. Ticking them also increases the dynamic price in the product layout.

If I have made any awful gaffs please do point them out – thank you.

Keep in touch and share

Graphicz on Social Media



01323 872296. 07836 551000.
Email:

Website by Graphicz