Rather nice pop-up off the component

[rookers]

Hi programming bods

I rather like this:
https://www.biggamehunters.co.uk/aca...Enclosure.html

.. on the component they have a nice little + symbol that generates a pop-up of the actual product that the component links to. Nice.

Just trying to figure out how this might be achieved.

Any ideas ?

[Mike Hughes]

That is quite nice isn't it. It lets them list optional extras to go with the product that can be added just by ticking the box. No idea how it's being done though.

[NormanRouxel]

They are using jQuery's .load function to load the product page into a Lightbox-like popup.

Rather than loading the full HTML page, they use the capability of .load to load only a portion of the page designated by a jQuery selector (in this case a DIV with class="product-information").

I use the same technique to load the entire product form from a products Product Page as a replacement for the SellerDeck Search Results, thus allowing products to be purchased straight from the search results page.

[rookers]

Nice. We could just do with a step by step guide on how to do this. lol.

[graphicz]

The answer lies here: http://api.jquery.com/load/

[graphicz]

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

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.

[graphicz]

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 dymamic price in the product layout.

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