Monday, 09 November 2020
  8 Replies
  1.7K Visits
0
Votes
Undo
  Subscribe
I slightly changed the Price Element:
Added the Property "Discount Price / Base Price" and slightly changed the code in the file element.php (protostore_price):

Screenshot-2020-11-09.png

I have attached a Video in which it is clear what happens with such a change.
I think it will be useful for users.
1 year ago
·
#242
0
Votes
Undo
Hi Igor ,

Many thanks...

I'm very interested in this... Can you explain in more detail what you've done here, and the usefulness of it... I my need to include it in the core in order for your changes to be update safe.

thanks again

Ray

Lead Developer - Pro2Store

❤ Based in Belfast, Northern Ireland (GMT)
---------------------------------------------------------------------------------------------------
JOIN THE PRO2STORE DISCORD
❔ Don't Forget to Check First Steps
❓ Read The Pro2Store Documentation
▶ Watch The Pro2Store Full Overview & Tutorial Video
---------------------------------------------------------------------------------------------------
If your request is urgent, please Submit A Ticket (Paid Accounts)
---------------------------------------------------------------------------------------------------
✅ Did I help you? Please mark your question as resolved by clicking the "Accept As Answer"

1 year ago
·
#249
0
Votes
Undo
Hi Igor ,
I'm very interested in this... Can you explain in more detail what you've done here, and the usefulness of it... I my need to include it in the core in order for your changes to be update safe.
Ray

When setting up a store, I needed the Base, Actual price of the product (shown as large font) to take into account the existence of Discounts on the product.

To do this, I added a check for the existence of the Discount to your code. And if it exists, then in the product card the price with the Discount, if not, then the Base price.
I showed the modified code in the screenshot. Result on a video.
I think this is a useful addition.

Result Video

PS. I think it might be worth adding the Base Price (small print, crossed out) next to the Discount Price. This is the practice in many stores.
1 year ago
·
#269
0
Votes
Undo
The Price element can be set to show "Price after discount" and it will achieve the same result if I understood correctly what this modification is doing. If there is discount, you see the discounted price. If there is no discount, you see the full price.

I agree with Igor, it would be nice to show the base price next to the discounted price. Currently, this can be done by adding two Price elements next to each other, and have the other one show "Base price" and another one show "Price after discount". And the "Base price" element can have a strike-through style. This is good when a discount exists.

But when there is no discount, both of the elements in previous example are visible and showing the full price, another one with strike-through style. So there should be an option to hide the Price element, if rule X applies. In this case, "Hide if product has no discount" could be applied to the element showing the base price (with strike-through). Then only one price is shown when no discount exists.
1 year ago
·
#270
0
Votes
Undo
As an addition to my previous message: Since Yootheme doesn't allow columns inside columns, it is in most cases difficult to align two Price elements next to each other. So from that perspective, maybe the Price element could have the option to show the base price too in case there is a discount. Something like this image:

base-price-suggestion.jpg
1 year ago
·
#271
0
Votes
Undo
Another addition to the previous comments: I wish I could write code like you guys to make these ideas become real. :( :( :( More practice is needed...
1 year ago
·
#279
0
Votes
Undo
As an addition to my previous message: Since Yootheme doesn't allow columns inside columns, it is in most cases difficult to align two Price elements next to each other. So from that perspective, maybe the Price element could have the option to show the base price too in case there is a discount. Something like this image:

I did it like this (by changing the Element):
Screenshot 2020-11-11 at 11.35.47.png
1 year ago
·
#286
0
Votes
Undo
Hi Igor

I'm happy to bring your code into the core if you're happy to submit it?

Ray

Lead Developer - Pro2Store

❤ Based in Belfast, Northern Ireland (GMT)
---------------------------------------------------------------------------------------------------
JOIN THE PRO2STORE DISCORD
❔ Don't Forget to Check First Steps
❓ Read The Pro2Store Documentation
▶ Watch The Pro2Store Full Overview & Tutorial Video
---------------------------------------------------------------------------------------------------
If your request is urgent, please Submit A Ticket (Paid Accounts)
---------------------------------------------------------------------------------------------------
✅ Did I help you? Please mark your question as resolved by clicking the "Accept As Answer"

1 year ago
·
#290
0
Votes
Undo
Hi Igor
I'm happy to bring your code into the core if you're happy to submit it?
Ray


element.php:


<?php
/**
* @package Pro2Store - Total
*
* @copyright Copyright (C) 2020 Ray Lawlor - Pro2Store. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/


use Joomla\CMS\Factory;
use Protostore\Price\Price;
use Protostore\Product\Product;
use Protostore\Utilities\Utilities;
use Protostore\Currency\Currency;


//$doc = Factory::getDocument();
//$doc->addScript(JURI::root() . "administrator/components/com_protostore/assets/js/yps-total.js", array('nomodule' => ''));
//$doc->addScript(JURI::root() . "administrator/components/com_protostore/assets/js/yps-total.esm.js", array('type' => 'module'));
////

return ['transforms' => ['render' => function ($node, array $params) {

$node->props['item_id'] = Utilities::getCurrentItemId();

$currencyHelper = new Currency();
$currency = new Protostore\Currency\Currency;
$product = new Product($node->props['item_id']);

$price_type = $node->props['price_type'];

switch ($price_type)
{
case "base_price":
$node->props['price_type_data'] = Currency::translate(Price::getBasePrice(), $currencyHelper);
break;
case "base_price_width_discount":
$node->props['price_type_data'] = Currency::translate(Price::getBasePrice(), $currencyHelper);
if ($product->discount_type === 'perc')
{
$node->props['price_type_data'] = Currency::translate(Price::calculatePriceAfterDiscount($node->props['item_id']), $currencyHelper);
}
break;
case "discount_amount":
$node->props['price_type_data'] = Currency::translate(Price::calculateItemDiscount($node->props['item_id']), $currencyHelper);
break;
case "discount_percentage":
$node->props['price_type_data'] = "";
if ($product->discount_type === 'perc')
{
$node->props['price_type_data'] = $product->discount;
}
break;
case "price_after_discount":
$node->props['price_type_data'] = Currency::translate(Price::calculatePriceAfterDiscount($node->props['item_id']), $currencyHelper);
break;

}


},]];


And add this code to element.json: "Discount Price / Base Price": "base_price_width_discount",


{
"@import": "./element.php",
"name": "protostore_price",
"title": "UNI Price",
"icon": "${url:images/protostore_price.svg}",
"iconSmall": "${url:images/protostore_price_small.svg}",
"element": true,
"container": true,
"group": "Pro2Store",
"defaults": {
"title_element": "h3"
},
"templates": {
"render": "./templates/template.php",
"content": "./templates/content.php"
},
"fields": {
"price_type": {
"label": "Type",
"description": "Choose what proce information to show",
"type": "select",
"default": "base_price",
"options": {
"Base Price": "base_price",
"Discount Price / Base Price": "base_price_width_discount",
"Discount Amount": "discount_amount",
"Discount Percentage": "discount_percentage",
"Price After Discount": "price_after_discount",
"Saving": "saving"
}
},
"content_before": {
"type": "text",
"label": "Content Before"
},
"content_after": {
"type": "text",
"label": "Content After"
},
"title_style": {
"label": "Style",
"description": "Choose the style of the Price information",
"type": "select",
"default": "",
"options": {
"None": "",
"2Xlarge": "heading-2xlarge",
"XLarge": "heading-xlarge",
"Large": "heading-large",
"Medium": "heading-medium",
"Small": "heading-small",
"H1": "h1",
"H2": "h2",
"H3": "h3",
"H4": "h4",
"H5": "h5",
"H6": "h6"
}
},
"strikethru": {
"type": "checkbox",
"text": "Strike Through?"
},
"title_decoration": {
"label": "Decoration",
"description": "Choose the decoration of the Price information",
"type": "select",
"default": "",
"options": {
"None": "",
"Divider": "divider",
"Bullet": "bullet",
"Line": "line"
}
},
"title_font_family": {
"label": "Font Family",
"description": "Select an alternative font family for the Price information.",
"type": "select",
"default": "",
"options": {
"None": "",
"Default": "default",
"Primary": "primary",
"Secondary": "secondary",
"Tertiary": "tertiary"
}
},
"title_color": {
"label": "Color",
"description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.",
"type": "select",
"default": "",
"options": {
"None": "",
"Muted": "muted",
"Emphasis": "emphasis",
"Primary": "primary",
"Success": "success",
"Warning": "warning",
"Danger": "danger",
"Background": "background"
}
},
"title_element": {
"label": "HTML Element",
"description": "Choose one of the elements to fit your semantic structure.",
"type": "select",
"options": {
"H1": "h1",
"H2": "h2",
"H3": "h3",
"H4": "h4",
"H5": "h5",
"H6": "h6",
"div": "div"
}
},
"position": "${builder.position}",
"position_left": "${builder.position_left}",
"position_right": "${builder.position_right}",
"position_top": "${builder.position_top}",
"position_bottom": "${builder.position_bottom}",
"position_z_index": "${builder.position_z_index}",
"margin": "${builder.margin}",
"margin_remove_top": "${builder.margin_remove_top}",
"margin_remove_bottom": "${builder.margin_remove_bottom}",
"maxwidth": "${builder.maxwidth}",
"maxwidth_breakpoint": "${builder.maxwidth_breakpoint}",
"block_align": "${builder.block_align}",
"block_align_breakpoint": "${builder.block_align_breakpoint}",
"block_align_fallback": "${builder.block_align_fallback}",
"text_align": "${builder.text_align_justify}",
"text_align_breakpoint": "${builder.text_align_breakpoint}",
"text_align_fallback": "${builder.text_align_justify_fallback}",
"animation": "${builder.animation}",
"_parallax_button": "${builder._parallax_button}",
"visibility": "${builder.visibility}",
"name": "${builder.name}",
"status": "${builder.status}",
"id": "${builder.id}",
"class": "${builder.cls}",
"css": {
"label": "CSS",
"description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>",
"type": "editor",
"editor": "code",
"mode": "css",
"attrs": {
"debounce": 500
}
}
},
"fieldset": {
"default": {
"type": "tabs",
"fields": [
{
"title": "Content",
"fields": [
"price_type",
"content_before",
"content_after",
"strikethru"
]
},
{
"title": "Settings",
"fields": [
{
"label": "Button",
"type": "group",
"divider": true,
"fields": [
"title_decoration",
"title_font_family",
"title_color",
"title_element"
]
},
{
"label": "General",
"type": "group",
"fields": [
"position",
"position_left",
"position_right",
"position_top",
"position_bottom",
"position_z_index",
"margin",
"margin_remove_top",
"margin_remove_bottom",
"maxwidth",
"maxwidth_breakpoint",
"block_align",
"block_align_breakpoint",
"block_align_fallback",
"text_align",
"text_align_breakpoint",
"text_align_fallback",
"animation",
"_parallax_button",
"visibility"
]
}
]
},
"${builder.advanced}"
]
}
}
}
  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
An Ecommerce Platform for Yootheme Pro The first and only ecommerce system to work directly with Yootheme Pro for Joomla.

© 2022 Ray Lawlor - Pro2Store. All rights reserved. Powered by (but not affiliated with) YOOtheme.