I recently added a minor feature to the slide out shopping cart on a Shopify site to show the customer how many more items they need to add to their cart to receive free shipping. It works just fine, however the issue is that if a customer updates their quantity from the cart, then the feature doesn't automatically update and show that they qualify for free shipping. The customer would have to refresh the page or go to another page to see the update.
How can I make this automatically update?
{% assign free_quantity = 2 %}
{% assign cart_total = cart.item_count %}
{% assign cart_qty_left = free_quantity | minus: cart_total %}
<p class="tt-cart__add-on-title tt-text-2">
{% if cart_qty_left > 0 %}
You are {{ cart_qty_left }} item away from free shipping!
{% else %}
You've got free shipping!
{% endif %}
</p>
The fastest and easiest solution is to make an AJAX request to the current page and replace the content.
For example:
fetch(window.location.href).then(r => r.text()).then(res => {
const html = new DOMParser().parseFromString(res, 'text/html');
const cartText = html.querySelector('.tt-cart__add-on-title').innerText;
document.querySelector('.tt-cart__add-on-title').innerText = cartText
})
Where we make a request to the current URL address with fetch(window.location.href), then we convert the response to text via .then(r => r.text()).
After that we create a DOMParser of the response text:
const html = new DOMParser().parseFromString(res, 'text/html');
We grab the text from the parsed html targeting the proper element:
const cartText = html.querySelector('.tt-cart__add-on-title').innerText;
And finally we replace the text that is present on the page with the text we got from the response with:
document.querySelector('.tt-cart__add-on-title').innerText = cartText
This should happen on a specific event when you add products to the cart or update them.
Related
I have own plugin in October CMS what have a onFilter() function whats return and displays partials with data. When user click on name it redirect him to a detail page. And when user click back button in browser I want to display his last search.
I tried something like Session::push('data', $data) in onFilter() method and Session::get('data') in onInit() but it didnt work. $data is a list of pubs.
Had anyone same problem?
Edit
public function onFilter()
{
$result =
Lounge::filterLounge($categories, $tags, $regions, $paidIds, $price_from, $search);
Session::put('nameFilter', $result);
return [
'#list' => $this->renderPartial('loungelist::list.htm', [
'list_data' => $result])
];
}
public function getNameFilter() {
$nameFilter = Session::get('nameFilter');
return $nameFilter;
}
In partial .htm
{% set list_data = __SELF__.getNameFilter() %}
{% for lounge in list_data %}
{{ lounge.name }}
{% endfor %}
As #mwilson mentions I would use window.history on the front end with the pushstate() function so that when each filter is changed you push state including query strings before firing to php to get the filtered content. I have done this before and works very well.
You should post more code for us to be more helpful. I am assuming you are using a component. Are you using ajax? Session will do the job.
In your component.php put onNameFilter() event you can push the data into the session with Session::put('nameFilter' $data);. I suggest using more specific labels for your events and keys so I chose 'nameFilter'.
You will want to use a method in your component.php to call the session.
public function getNameFilter() {
$nameFilter = Session::get('nameFilter');
return $nameFilter;
}
Now in your partial.htm you can set the name filter data and access it as long as it is in the session:
{% set nameFilterData = __SELF__.getNameFilter() %}
EDIT TO SHOW REFLECTED CODE
I don't understand how it works the first time. What does your CMS Page look like? How do you show the filter the "first time"?
Your CMS Page has {% component 'something' %} right? Then in your default.htm file you have {% partial __SELF__~'::list %}?
In your partial you will need to display the list_data. Does this show anything?
{% for list in list_data %}
{{ list_data.name }}
{% endfor %}
This my first time to use OctoberCMS, and they provide the Builder Plugin in order to help the developer builds plugin in minutes.
I try to use this plugin to show the data on the front end especially when using Components > Builder > Record list, but the documentation didn't give enough example to get data from some fields. The example on the internet is just show how to get the data from one field.
My code is shown below:
[builderList]
modelClass = "Budiprasetyo\Employees\Models\Employee"
scope = "-"
displayColumn = "name"
noRecordsMessage = "No records found"
detailsPage = "-"
detailsUrlParameter = "id"
pageNumber = "{{ :page }}"
in my case, I want to get the data not only "name" field, but I also want to add "email", "facebook" fields.
I have tried to make it into:
displayColumn = "name", "email", "facebook"
but it returns no data shown and I have tried to make it into array:
displayColumn = ["name", "email", "facebook"]
and it's the same result, no data is shown.
I appreciate any helps, thank you.
Actually I don't like to use plugins' components. Sometimes it doesn't retrieve any data. I don't know why maybe it's just because of wrong using.
Anyway, The best way to retrieve the data from your plugin is to navigate to the code section and then write onStart() function and start to retrieve to data.
function onStart()
{
$data = \Authorname\Pluginname\Models\Model::find(1);
$this['data'] = $data;
}
And this way you'll have a data variable in the markup section.
On the frontend cms page, you need to replace the component call with your custom partial. Your partial file should look something like this:
*podcastList is the component name
{% set records =podcastList.records %}
{% set displayColumn =podcastList.displayColumn %}
{% set noRecordsMessage =podcastList.noRecordsMessage %}
{% set detailsPage =podcastList.detailsPage %}
{% set detailsKeyColumn =podcastList.detailsKeyColumn %}
{% set detailsUrlParameter =podcastList.detailsUrlParameter %}
{% for record in records %}
<span class="date">{{ attribute(record, 'date') }}</span>
<span class="title">{{ attribute(record, 'title') }}</span>
<p>{{ attribute(record, 'description') }}</p>
{% endfor %}
Obviously, this is simplified version, but you get the point. You can easily define more columns without touching the page component settings.
This is driving me crazy. I am building an ecommerce app, with the cart in Django-carton. When I add an item to the cart, I can get the item's id from the context into the store, and pass it into my Ajax call and to the view when a customer adds the item with a button click.
I want the customer to be able to delete and edit quantities in the cart using a button, and am now trying to create my delete and my edit quantity functions. I'm stuck because I don't understand how to pass the id the the view in Ajax. The id isn't in the item context object. I can get the id in the view by printing ids = request.session['CART'], but it does not have the current id. The items in context are limited to the following:
self.product = product
self.quantity = int(quantity)
self.price = Decimal(str(price))
The example in Django-carton's documentation has this example, which doesn't use Javascript:
views:
def remove(request):
cart = Cart(request.session)
product = Product.objects.get(id=request.GET.get('id'))
cart.remove(product)
return HttpResponse("Removed")
urls:
u`rl(r'^remove/$', 'remove', name='shopping-cart-remove'),`
In my view, I can get the ids of all of the objects in the cart with
cart = Cart(request.session)
ids = request.session['CART']
which gives me the following object:
{u'meal_pk': 15, u'price': u'5', u'quantity': 39}
But this doesn't actually seem helpful. This is my first encounter with sessions. I've been reading through the code here https://github.com/lazybird/django-carton/blob/master/carton/cart.py How can I edit or delete an item in my cart?
You can still call the remove view via AJAX quite easily with Javascript; unless otherwise specified, the view does not care if the request is submitted via AJAX. So, we can set that up easily w/ JQuery.
So, in a template showing the shopping cart, for example:
{% load carton_tags %}
{% get_cart as cart %}
<script type="text/javascript" src="path/to/jquery.js">/script>
{% for item in cart.items %}
<a onclick='AjaxRemove("{% url 'shopping-cart-remove' %}?id={{ item.product.id }}")'>Remove this item</a>
{% endfor %}
<script type="text/javascript">
function AjaxRemove(remove_url) {
$.ajax({
url: remove_url,
success: function(response) {alert(response);},
error: function() {alert("Couldn't remove item");}
})
</script>
will remove the item and give an alert if the AJAX request responds with success.
You can further customize the view response to respond differently to AJAX requests using request.is_ajax():
def remove(request):
cart = Cart(request.session)
product = Product.objects.get(id=request.GET.get('id'))
cart.remove(product)
if request.is_ajax():
# do something, respond differently
return HttpResponse("Removed (via AJAX)")
return HttpResponseRedirect(reverse('shopping-cart-show'))
I need to know on which type of page I am on in a Shopify App. For example
% if template contains 'product' %}
{% assign entity = product %}
{% elsif template contains 'article' %}
{% assign entity = article %}
{% endif %}
This in a liquid page tell me about product and article pages. What are such tags for say category page or home page?
The template variable tells you the name of the template for the current page. For example, your home page is index.liquid so on that page {{ template }} will output index (the name of the template without ".liquid" extension).
Is that what you're looking for?
Use case
I am developing a CMF on top of Symfony2. One of the features will be the support of "widgets": an possibility for end users to add small 'blocks' or 'modules' to a page. Examples:
A small login form
A list of products
Some photo's from a gallery
A shopping cart
The idea is that most of those widgets will link to to normal, full page Routes/Controllers.
For example: a user want a list of popular products in a sidebar on a content page. The items will link to the normal /product/{name} route of the ProductController. But the list in this case would be a widget. The end user can define where it must be placed, and for example, how much items must be shown.
The behavior of the 'widgets' is the same as regular Symfony2 controllers, it has routes, actions, it renders a view, etcetera. There is a WidgetManager with a catch-all route to load the widgets, configure them and render them in the right place.
I have not that much experience with Symfony2, but I am playing wit it now for more then 3 months. I definitely want to stay with Symfony2, but will need to add some magic to realize some of my ideas.
Question
What is the best way to support rendering multiple controllers (widgets) in one request?
Research
Symfony's TwigExtension "ActionExtension" contains a "render" method, which contains the basic idea:
<div id="sidebar">
{% render "AcmeArticleBundle:Article:recentArticles" with {'max': 3} %}
</div>
(Documentation: http://symfony.com/doc/current/book/templating.html#embedding-controllers)
But it is quite limited. Some problems with this approach:
I cannot configure the 'widgets' before rendering them (for example: $myWidget->set('show_toolbar', false)), I don't want to pass all options as controller action parameters.
It is not possible to use template inheritance. I need this for example for 'injecting' the asset references (javascript/css) in de base <HEAD> block.
What I want
I want the following code to work (this is a simplified example):
// Serius\PageBundle\Controller\PageController.php
// executed by a catch-all route
public function indexAction($url) {
// load CMS page, etc
$widgets = $this->loadWidgets($page); // widgets configuration is stored in database
// at this point, $widgets is an array of Controller *instances*
// meaning, they are already constructed and configured
return $this->render("SeriusPageBundle:Page:content.html.twig", array(
'widgets' => $widgets
));
}
Serius\PageBundle\Resources\views\Page\content.html.twig
{% extends 'SeriusPageBundle::layout.html.twig' %}
{% block content %}
{% for widget in widgets %}
<div>
{% render widget %}
<!-- Of course, this doesn't work, I would have to create my own Twig extension -->
</div>
{% endfor %}
{% endblock %}
An example of a widget template:
{% extends '::base.html.twig' %}
{% block stylesheets %}
My stylesheets
{% endblock %}
{% block body %}
This is a shoppingcart widget!
{% endblock %}
How can I achieve this? Do someone have experience with anything like this? I already looked at the Symfony CMF project, but it has no support for this (as far as I could find out).
I have something similar going around and I think that this code will help you. In chosen template you get the variables with the names of blocks.
public function render()
{
$modules = $this->moduleService->getModules();
foreach($modules as $m){
$templateName = $m->getTemplateName();
$template = $this->twig->loadTemplate($templateName);
$blockNames = $template->getBlockNames();
foreach($blockNames as $b){
if(isset($this->blocks[$b]) == false)
$this->blocks[$b] = '';
$this->blocks[$b] .= $template->renderBlock($b, array('a' => 'aaa', 'b' => 'bbb'));
}
}
$content = $this->twig->render('Admin/index.html.twig',$this->blocks);
return new \Symfony\Component\HttpFoundation\Response($content);
}
I know this is old, but if anyone is looking for something like this the SonataBlockBundle might be your solution.
https://github.com/sonata-project/SonataBlockBundle