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 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> are short-legged, muscular quadrupedal marsupials that are native to Australia. They are about 1 m (40 in) in length with small, stubby tails. There are three extant species and they are all members of the familyVombatidae. They are adaptable and habitat tolerant, and are found in forested, mountainous, and heathland areas of south-eastern Australia, including Tasmania, as well as an isolated patch of about 300 ha (740 acres) in Epping Forest National Park[2] 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 million years. While some theories place wombats as miniaturised relatives of diprotodonts, such as the rhinoceros-sized 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:
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: