I'm modifying the modal tpl to display a message that shows the difference that is left to have a free shipping.
I know how to display the message but I can't show the variable I've created in the text. And I've doubts that I'm creating well the variable.
I have to show the difference between the subtotal and 150 €
I've tried:
<div class="col-md-7">
<div class="cart-content pt-3">
{if $cart.products_count > 1}
<p class="cart-products-count">
{l s='There are %products_count% items in your cart.' sprintf=['%products_count%' => $cart.products_count] d='Shop.Theme.Checkout'}
</p>
{else}
<p class="cart-products-count">
{l s='There is %product_count% item in your cart.' sprintf=['%product_count%' =>$cart.products_count] d='Shop.Theme.Checkout'}
</p>
{/if}
<p>
<strong>{l s='Total products:' d='Shop.Theme.Checkout'}</strong> {$cart.subtotals.products.value}
</p>
{hook h='displayCartAjaxInfo'}
<div class="cart-content-btn">
{l s='Proceed to checkout' d='Shop.Theme.Actions'}
<button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">{l s='Continue shopping' d='Shop.Theme.Actions'}</button>
</div>
<div class="remember-vip">
<br>
{assign var="diferencia" value=$cart.subtotals.products.value-150.00}
Le faltan $diferencia para disponer de envío gratuito.
</div>
</div>
</div>
This is how the code looks now:
Current result
Related
This is the code I have right now and I'd like to execute que script (at the bottom) as soon as the page loads instead of onclick the button.
{capture name=path}
{l s='Amanpay payment.' mod='amanpay'}
{/capture}
<h1 class="page-heading">
{l s='Order summary' mod='amanpay'}
</h1>
{assign var='current_step' value='payment'}
{include file="$tpl_dir./order-steps.tpl"}
{if $nbProducts <= 0}
<p class="alert alert-warning">
{l s='Your shopping cart is empty.' mod='amanpay'}
</p>
{else}
<div class="box cheque-box">
<h3 class="page-subheading">
{l s='Amanpay payment.' mod='amanpay'}
</h3>
<p class="cheque-indent">
<strong class="dark">
{l s='You have chosen to pay by Amanpay.' mod='amanpay'}
{l s='Here is a short summary of your order:' mod='amanpay'}
</strong>
</p>
<p>
- {l s='The total amount of your order is' mod='amanpay'}
<span id="amount" class="price">{displayPrice price=$total}</span>
{if $use_taxes == 1}
{l s='(tax incl.)' mod='amanpay'}
{/if}
</p>
<p>
- {l s='Please confirm your order by clicking "I confirm my order."' mod='amanpay'}.
</p>
</div>
<p class="cart_navigation clearfix" id="cart_navigation">
{*
<a
class="button-exclusive btn btn-default"
href="{$link->getPageLink('order', true, NULL, "step=3")|escape:'html':'UTF-8'}">
<i class="icon-chevron-left"></i>{l s='Other payment methods' mod='amanpay'}
</a>
*}
<a class="button btn btn-default button-medium" href="#" onclick="return confirm(event)">
<span>{l s='I confirm my order' mod='amanpay'}
<i class="icon-chevron-right right"></i>
</span>
</a>
{*<div style="float: right;margin-top: -38px;">*}
{$amanpay_widget}
{*</div>*}
</p>
<script type="text/javascript">
function confirm (e)
{
e.preventDefault();
AmnPy.loadModal();
}
</script>
{/if}
As I said, I need the page to trigger the script onload instead of having to click the confirmation button
Perfect! finally... here was the answer:
<script>
$( document ).ready(function() {
AmnPy.loadModal();
});
</script>
In an example category, the result products are listed using an unknown template. I have pagayo electronics theme as default.It uses a class called item-review and item-bottom for listing. they aren't in html code.
code is like this:
<ul class="products-grid">
<li class="item first">
<img src="http://magicfly.ir/media/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/1/3/13steps2.jpg" width="135" height="135" alt="13 Steps to Mentalism" />
<h2 class="product-name">13 Steps to Mentalism</h2>
<div class="ratings">
<span class="amount">1 نظر</span>
</div>
<div class="price-box">
<span class="regular-price" id="product-price-10">
<span class="price">30٬000 تومان</span> </span>
</div>
<div class="actions">
<p><button type="button" title="افزودن به سبد" class="button btn-cart" onclick="setLocationAjax('http://magicfly.ir/checkout/cart/add/uenc/aHR0cDovL21hZ2ljZmx5LmlyL21lbnRhbGlzbS5odG1s/product/10/form_key/Ql6smZ0IvKikUDgX/','10')"><span><span>افزودن به سبد</span></span></button></p>
<ul class="add-to-links">
<li>افزودن به لیست دلخواه</li>
<li><span class="separator">|</span> افزودن به مقایسه</li>
</ul>
while it should be like this (wrap with item-review and item-bottom classes):
<ul class="products-grid first odd">
<li class="item first">
<img src="http://demo.pagayo.com/media/catalog/product/cache/1/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/a/p/apple-tv-1.jpg" alt="Apple TV" height="210" width="210">
<div class="item-review">
</div>
<div class="item-bottom">
<h2 class="product-name">Apple TV</h2>
<div class="price-box">
<span class="regular-price" id="product-price-9">
<span class="price">$99.00</span> </span>
</div>
<div class="actions">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://demo.pagayo.com/pagayotheme001/checkout/cart/add/uenc/aHR0cDovL2RlbW8ucGFnYXlvLmNvbS9wYWdheW90aGVtZTAwMS9hY2Nlc3Nvcmllcy5odG1s/product/9/')"><span><span>Add to Cart</span></span></button>
</div>
</div>
</li>
<li class="item">
<img src="http://demo.pagayo.com/media/catalog/product/cache/1/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg" alt="Bose SoundDock Portable Digital Music System" height="210" width="210">
<div class="item-review">
<div class="ratings">
<div class="rating-box">
<div class="rating" style="width:97%"></div>
</div>
<span class="amount">2 Review(s)</span>
</div>
</div>
<div class="item-bottom">
<h2 class="product-name">Bose SoundDock Portable Digital Music System</h2>
<div class="price-box">
<span class="regular-price" id="product-price-22">
<span class="price">$399.95</span> </span>
</div>
<div class="actions">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://demo.pagayo.com/pagayotheme001/checkout/cart/add/uenc/aHR0cDovL2RlbW8ucGFnYXlvLmNvbS9wYWdheW90aGVtZTAwMS9hY2Nlc3Nvcmllcy5odG1s/product/22/')"><span><span>Add to Cart</span></span></button>
</div>
</div>
</li>
<li class="item last">
<img src="http://demo.pagayo.com/media/catalog/product/cache/1/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg" alt="Bose SoundLink Bluetooth Mobile speaker II" height="210" width="210">
<div class="item-review">
</div>
<div class="item-bottom">
<h2 class="product-name">Bose SoundLink Bluetooth Mobile speaker II</h2>
<div class="price-box">
<span class="regular-price" id="product-price-21">
<span class="price">$349.95</span> </span>
</div>
<div class="actions">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://demo.pagayo.com/pagayotheme001/checkout/cart/add/uenc/aHR0cDovL2RlbW8ucGFnYXlvLmNvbS9wYWdheW90aGVtZTAwMS9hY2Nlc3Nvcmllcy5odG1s/product/21/')"><span><span>Add to Cart</span></span></button>
</div>
</div>
</li>
</ul>
in
/app/design/frontend/default/pagayo-theme-001/template/catalog/product/list.phtml
it is correctly wrapped but it seems it uses another theme that doesn't wrap it.
I didn't specify custom template for category or any product.
The amazing thing here is I checked list.phtml of base template and copied pagayo list.phtml to base. Just nothing happened.
I want it to use the default theme I specified in configuration Or at least find the phtml file of this piece of code to edit and make it correct.
without seeing its had to infer solution. possibilities are:
1) There can be an issue of improperly selected Magento Package.
system->configuration->Design->Package
2) If you want to see which template using on Template Path hints
system->configuration-> Developer -> Debug -> Template Path Hints select to on
clear cache and refresh the page.
I'm trying create modal that is dynamic and pre fills with the details of the item that is clicked on. Here is my code:
HTML:
{foreach from=$flowers3 item=row}
{foreach from=$row item=item}
<div class="item col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="product">
<div class="image">
<div class="quickview">
<a alt="Quick View" class="btn btn-xs btn-quickview" data-target="#modal" data-toggle="modal"> View </a>
</div>
<a href="#">
<img class="item_thumb img-responsive" src="img/{$item.im}" alt="img">
</a>
</div>
<div class="description">
<h4 class="item_name">{$item.title}</h4>
<p class="item_price">
small
<input type="Radio" name="product" value="{$item.id}s" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.ps|money:0}</span> | med
<input type="Radio" name="product" value="{$item.id}m" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.pm|money:0}</span> | lg
<input type="Radio" name="product" value="{$item.id}l" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.pl|money:0}</span>
</p>
</div>
<div class="action-control">
<a href="javascript:;" onClick="mySubmit()">
<span class="button-fill grey">
<i class="glyphicon glyphicon-shopping-cart">
</i> Add to cart </span>
</a>
</div>
</div>
</div>
{/foreach}
{/foreach}
Here's the PHP:
<?php
$GLOBALS['flowers']=getFlowers();
function &getFlowers(){
static $flowers;
if(!isset($flowers)){
$flowers=array(
'1'=>array('im'=>'store-a1.jpg','title'=>'CocoChanel','description'=>' Fashion fades.'),
'2'=>array('im'=>'store-a2.jpg','title'=>'The Royal Jewels','description'=>'Fit for any Queen.'),);}
$i=1;
foreach($flowers as $k=>&$v){
$v['id']=$k;
$v['num']=$i++;}
return $flowers;}
?>
And here's the modal:
<!--modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button"> ×</button>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<!-- product Image -->
<div class="main-image col-lg-12 no-padding style3 modal-image">
<a class="product-largeimg-link" href="#">
<img src="img/{$item.imb}" class="img-responsive product-largeimg" alt="img">
</a>
</div>
<!--/image-->
</div>
</div>
<!--/ product Image-->
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 modal-details no-padding">
<div class="modal-details-inner">
<h1 class="product-title">{$item.title}</h1>
<div class="details-description">
<p>{$item.description}</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--/modal -->
When I add the modal within the {foreach} tags, it only fills with the information for one particular item (depending on where I place it. ex: it might be the first item, or if I place it between the {foreach from=$flowers3 item=row} it will be the last of the first row) but I can't get it to update every item on the particular "Quick View" that is clicked.
Thanks in advance for any help!!
Store the properties of the items in data-attributes of the item 's in your html:
<div class="item ..." ... data-title="Nice flower" data-price="€1,20" > ... </div>
Now use some javascript to update the modal. jQuery example:
$('.item').click(function(){
var el = $(this);
$('.modal .product-title').text(el.attr('data-title'));
// and the rest of the properties, then open the modal
});
I have created a channel called credit cards. So I have created a template group called credit-cards with an index which loops through all the credit cards and output them. This aspect works fine, here is my code for the index.html file inside credit-cards.group folder:
{exp:channel:categories category_group="1" style="linear" dynamic="no"}
<div class="card-list tab" id="{category_url_title}">
<h2 class="category-title">{category_name} Credit Cards</h2>
<div class="cards">
{exp:channel:entries channel="credit_cards" category="{category_id}" dynamic="no"}
<article>
<h4>{title}<span class="web-exclusive">MBNA Website Exclusive</span></h4>
<ul>
<li class="col-img">
<img width="116" height="84" alt="MBNA Platinum Credit Card" src="../lib-ui/img/cards/core/core_116x84/mbna_platinum_card_116x84.png">
</li>
<li class="col-bt">{balance_transfer_rate}</li>
<li class="col-purchases">{purchases_rate}</li>
<li class="col-features">{key_features}</li>
<li class="col-apply">
<a rel="blank" class="btn btn-success" href="{apply_url}">
Apply Now<span class="hide"> for the {title}</span>
</a>
<a class="cta" href="{url_title_path='credit-cards'}">
Learn more<span class="hide"> about the {title}</span>
</a>
<label class="mbna-credit-card checkbox" for="compare_1">
<span tabindex="0">
<input type="checkbox" value="mbna-credit-card" id="compare_1">
</span>
<span class="hide"> Add the {title} to </span>Compare
</label>
</li>
</ul>
<p class="rep-ex">{representative_example}</p>
</article>
{/exp:channel:entries}
</div>
</div>
{/exp:channel:categories}
So my question is this. Say I have a credit card called visa credit card, the url that is being generated for it is /credit-cards/visa-credit-card. When I click this link though I just get my index page again. I have created another template file inside my group called single.html that has the code to output a single credit card. This looks like so:
<h1>Credit Card Page</h1>
{exp:channel:entries channel="credit_cards" limit="1"}
{if no_results}
{redirect="404"}
{/if}
So how do I get it to use this template file instead for a single entry?
This is actually a pretty easy to shore up issue. What you have going on is that line 5 of your code has no way to tell if it should limit the entry information. With dynamic='no', you've said "EE, you don't need to use the URL here to figure out what entries to limit this by"
My suggestion would be the following code:
{if segment_2 == ""}
{exp:channel:categories category_group="1" style="linear" dynamic="no"}
<div class="card-list tab" id="{category_url_title}">
<h2 class="category-title">{category_name} Credit Cards</h2>
<div class="cards">
{exp:channel:entries channel="credit_cards" category="{category_id}" dynamic="no" disable="category_fields|member_data|pagination|trackbacks"}
<article>
<h4>{title}<span class="web-exclusive">MBNA Website Exclusive</span></h4>
<ul>
<li class="col-img">
<img width="116" height="84" alt="MBNA Platinum Credit Card" src="../lib-ui/img/cards/core/core_116x84/mbna_platinum_card_116x84.png">
</li>
<li class="col-bt">{balance_transfer_rate}</li>
<li class="col-purchases">{purchases_rate}</li>
<li class="col-features">{key_features}</li>
<li class="col-apply">
<a rel="blank" class="btn btn-success" href="{apply_url}">
Apply Now<span class="hide"> for the {title}</span>
</a>
<a class="cta" href="{url_title_path='credit-cards'}">
Learn more<span class="hide"> about the {title}</span>
</a>
<label class="mbna-credit-card checkbox" for="compare_1">
<span tabindex="0">
<input type="checkbox" value="mbna-credit-card" id="compare_1">
</span>
<span class="hide"> Add the {title} to </span>Compare
</label>
</li>
</ul>
<p class="rep-ex">{representative_example}</p>
</article>
{/exp:channel:entries}
</div>
</div>
{/exp:channel:categories}
{/if}
{if segment_2}
{exp:channel:entries channel="credit_cards" limit="1" disable="category_fields|member_data|pagination|trackbacks"}
<article>
<h4>{title}<span class="web-exclusive">MBNA Website Exclusive</span></h4>
<ul>
<li class="col-img">
<img width="116" height="84" alt="MBNA Platinum Credit Card" src="../lib-ui/img/cards/core/core_116x84/mbna_platinum_card_116x84.png">
</li>
<li class="col-bt">{balance_transfer_rate}</li>
<li class="col-purchases">{purchases_rate}</li>
<li class="col-features">{key_features}</li>
<li class="col-apply">
<a rel="blank" class="btn btn-success" href="{apply_url}">
Apply Now<span class="hide"> for the {title}</span>
</a>
<a class="cta" href="{url_title_path='credit-cards'}">
Learn more<span class="hide"> about the {title}</span>
</a>
<label class="mbna-credit-card checkbox" for="compare_1">
<span tabindex="0">
<input type="checkbox" value="mbna-credit-card" id="compare_1">
</span>
<span class="hide"> Add the {title} to </span>Compare
</label>
</li>
</ul>
<p class="rep-ex">{representative_example}</p>
</article>
{/exp:channel:entries}
{/if}
Mind you, this isn't 100% accurate, as I stripped out your exp:channel:categories tag, but this should get you a result that limits based on a shortened URL like you've specified.
So how do I get it to use this template file instead for a single
entry?
Instead of:
{url_title_path='credit-cards'}
Use
{title_permalink="credit-cards/single"}
There are two primary ways you can use the template 'credit-cards/single' for the VISA credit card category entry.
First Option
'credit-cards/index' template would have:
{if segment_2 != ""}
{embed="credit-cards/single" entry_id="{entry_id}"}
{/if}
'credit-cards/single' template would have:
<h1>Credit Card Page</h1>
{exp:channel:entries channel="credit_cards" limit="1" entry_id="{embed:entry_id}"}
{if no_results}
{redirect="404"}
{/if}
... your code ...
{/exp:channel:entries}
Second Option
Rename 'credit-cards/single' to 'credit-cards/company' (or something more SEO relevant) and use it the default EE way.
'credit-cards/index' template would stay the same.
'credit-cards/company' template would have:
<h1>Credit Card Page</h1>
{exp:channel:entries channel="credit_cards" limit="1" entry_id="{entry_id}"}
{if no_results}
{redirect="404"}
{/if}
... your code ...
{/exp:channel:entries}
In this second option the url would be site.com/credit-cards/company/visa-credit-card
I hope that helps. Let me know if I've misunderstood anything.
You'll probably want something like this in the index template:
{if segment_2 != ""}
{exp:channel:entries channel="credit_cards"}
[single entry code...]
{/exp:channel:entries}
{if:else}
{exp:channel:categories category_group="1" style="linear" dynamic="no"}
[your code for all credit cards]
{/exp:channel:entries}
{/if}
What's happening is the URL /credit-cards/visa-credit-card is loading the index template of the credit-cards template group, but the visa-credit-card URL title at the end tells ExpressionEngine to treat the template as a single entry page.
But the the dynamic="no" in your exp:channel:entries tag is why EE is still showing all the credit cards on that page. This free video about dynamic="off" might explain it better.
Thanks for all the great suggestions. I used the pages modules in the end which allows you to specify which template to use.
I got a social network share button from add to any. I want to place it under all my products.
I edited product.tpl in my theme and add addToAny code given by them. But its not showing there.
<!-- number of item in stock -->
{if ($display_qties == 1 && !$PS_CATALOG_MODE && $product->available_for_order)}
<p id="pQuantityAvailable"{if $product->quantity <= 0} style="display: none;"{/if}>
<span id="quantityAvailable">{$product->quantity|intval}</span>
<span {if $product->quantity > 1} style="display: none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}</span>
<span {if $product->quantity == 1} style="display: none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}</span>
</p>
<div>
//Adding my addToAny share code here
</div>
{/if}
<!-- Out of stock hook -->
{if !$allow_oosp}
<p id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>
{$HOOK_PRODUCT_OOS}
</p>
{/if}
In admin panel
goto --> preference --> performance --> select Force compile to yes. Smarty wont compile until you set it to yes.