Need Help Replacing Colorbox with Foundations Reveal Modual

chubbard216

I would like to add products to the cart using Foundations 'Reveal' as the modal window, as opposed to the standard 'Colorbox'.

I have gleaned from the documentation that I need to utilize Example 4: Add to cart and view cart using a different modal window from the Add products to the cart without Colorbox code snippets.

I tried following the advice laid out in a similar forum topic by microcipcip, but was unable to produce the same results.

I primarily develop in PHP and admittedly my JavaScript skills are weak, so I could really use some help working this one out.

The docs code for Example 4: Add to cart and view cart using a different modal window is below:

<script type="text/javascript">
jQuery(document).ready(function() {
// Restart the process event collection object
fcc.events.cart.process = new FC.client.event();

// Define the new process event
fcc.events.cart.process.add(function(e){
var href = '';
if (e.tagName == 'A') {
href = e.href;
} else if (e.tagName == 'FORM') {
href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
}
if (href.match("cart=(checkout|updateinfo)") || href.match("redirect=")) {
return true;
} else {
/* Add your own modal window display logic here. Make sure to include the following:
We suggest using an iFrame in your modal of choice if the option is available.
URL to load in the iFrame: href
Call the following in the onClosed callback function if it is available: fcc.events.cart.postprocess.execute(e)
*/
*
return false;
}
});
});
</script>

fc_adam

@chubbard216,

Could you provide the code you've tried? The key as I understand it with Reveal is you need to have the div for the cart as part of your page markup for reveal to reference and load. That div would have an iframe in it that you load the cart into then display the reveal. The code in the thread you referenced covers that side of things, but not the iframe part.

Do you have a page with the code you're working with for us to see?

chubbard216

@fc_adam,

Sorry for the delay, juggling a few too many balls at the moment!

Anyhow, according to the docs the markup that is loaded up by Reveal is wrapped in a <div> with a particular ID, and that ID is referenced by a handler or HTML object when it is ready to be called:

<div id="myModal" class="reveal-modal">
...
</div> 

<a href="#" class="button" data-reveal-id="myModal">Click Me For A Modal</a>

Adding the data-reveal-id parameter to my add to cart forms/links won't be difficult, but I am unsure how to properly format the markup that is loaded when I call it.

<div id="myModal" class="reveal-modal">
 <iframe src="https://campbellssweets.foxycart.com/cart"></iframe>;
</div>

This loads the cart inside of the Reveal module, but the formatting is really poor. Basically it just displays a 'squished' cart inside of Reveal.

How would I format the contents of the cart to be responsive (i.e. wrap the various objects that are displaying in Foundation div's)? Do I need to access the TWIG directly to achieve this?


**For what it's worth, I am using Foundation 3 for this client**
http://foundation.zurb.com/old-docs/f3/reveal.php

winston

@chubbard216

You're correct, to restyle the cart and make it responsive, you'd add all CSS to the Cart Template in the Admin. Pasting it in there and recaching will allow it to override the default styling.

chubbard216

@winston,

I am familiar with the process of template caching to add my own CSS to the cart template.

But what I don't understand is how I would go about adding my own markup to the template.

Say for instance I wanted to wrap the cart objects in the same Foundation-based markup that I am using for the rest of the site, how would I do that?

brett

Hi @chubbard216.
A few quick things.

First, there are two options that'd let you completely control the HTML entirely. The first is to use Twig, the template language we adopted in v1.0+.
http://wiki.foxycart.com/v/1.1/templates#getting_even_more_advanced_with_twig
The second would be to do it clientside with JSONP:
http://www.foxycart.com/features/feature/integration/jsonp

That said, you might be interested to know that we're working on a pretty significant change to our templates, so instead of the Twig templates just having the fc_ classes hardcoded, those will be configurable, and you'd be able to use a Foundation config option to get the Foundation-specific classes by default. We're currently building this out with Twitter Bootstrap v3, but once we're done there we'll make a Foundation object as well so you'll just be able to select Foundation and get HTML that already has the classes you want. (Of course, you could still dig in and customize, but it'd be a head start.)

Does that help?

chubbard216

@brett,

Let me start by saying that I am excited to hear you guys moving forward with responsive templates. It does sound like a pretty big overhaul however - is there a timeframe you guys are shooting for to have it released?

Now as far as modifying the current templates are concerned, I have read the documentation about Twig and its functionality, but I seem to be missing something:

For example, on my clients checkout page (and I think everyone's checkout page thats using a default template) there is a link directly below the partial cart like this:

Cancel and Continue Shopping

From what I can tell, the following block in the checkout.inc.twig file is populating that link:

{% block continue_shopping %}
    <div id="fc_cancel_continue_shopping">
    {% if page_referer != '' and not is_updateinfo %}
        <a href="{{ page_referer }}">{{ lang.checkout_cancel_and_continue|raw }}</a>
    {% endif %}
    </div>
 {% endblock continue_shopping %}

My question is where exactly is the 'lang.checkout_cancel_and_continue' variable that the template is accessing to output Cancel and Continue Shopping ?

Say I wanted that link only to read Continue Shopping, how would I go about doing that?

brett

To modify that, just hit the "language" link in the "templates" section in the admin. You can tweak any language string right there, without touching the template file.

Unfortunately, Twig doesn't currently allow for overriding specific values within an object (like the lang object), so you can't change those conditionally, but creating a custom method to allow setting object properties is something we're contemplating for a future release if there's a good need for it that aren't addressed with another bit of coming-in-a-future-release functionality.