Advanced customization of product with many options/variants

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #349982

-- url of the page with the problem -- : www.javelincommunications.com/build-you-dream-stanchion
-- HikaShop version -- : 4.7.1
-- Joomla version -- : 3.10.11

Thanks to Hika team for helping me make a prototype of an advanced product with eight options and 20 variants, dispensing with the need for dozens and dozens of separate products. It can be seen here. www.javelincommunications.com/build-you-dream-stanchion

Everything works, but there are some unfriendly user aspects.

1. The product main price is irrelevant and may only serve to confuse the user. Ideally we only would show "Price with options." Is that possible on a selective basis, instead of using a global PHP or CSS that cascades to all products? (The site I am doing will have a bunch of separate products displayed conventionally; so in those cases we will need to show base price.)

2. Ideally we would want a top text field which says: "Select options to see price." Can it be done?

3. In inspecting the source, I see that the layout is tabular. It has been some years since I last worked with that. Where can I edit the table style to increase line spacing, bortders and colors etc? Had a hard time scoping out location of souorce code.

Thank you,
-Jim Gribble

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
1 year 1 month ago #349987

Hi,

1. Go in the menu Display>Views. There you can customize the view file product / show_default (or show_tabular if you're using the "tabular" layout) which is the main layout of the product page.
You can easily remove the main price area there with the drag'n'drop interface. And before saving, you can change the name of the layout to that you get a new layout.
Then, in each product edit form, you have a layout setting which allows you to select the layout you want to use on the product page among the available ones.

2. Sure. In the same view override (as explained in point 1), you can add your text where you want.

3. If you want the change the style of the elements, you want to use CSS code. We have a tutorial here on how to add your custom CSS :
www.hikashop.com/support/documentation/1...ize-the-display.html
Also, at the bottom of that page, we have some information about the view override mechanism I talk about in point 1.

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #349998

I'm sure I'll have some more questions as I stumble forward! But thanks for showing me that what I want to do can be done. It does appear we can deliver this customer's dream solution to his ecommece challenges.
-Jim Gribble

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350004

Since I am a little concerned about breaking something but accident, I am going to take these questions one at a time to confirm my understanding.


Here (see screenshot), to save a new layout, I just overwrite "default" to whatever name I want to use.
Correct? (I was looking for the usual Joomla option to "save file as.")
And then, how do I apply the new layout to my multipurpose product?
Like, will it show up here?

Thank you!
-Jim Gribble

Attachments:
Last edit: 1 year 1 month ago by jgribble.

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350012

2. Sure. In the same view override (as explained in point 1), you can add your text where you want.
Above the options container, I want to have a heading which says: Select Options To See Price.
I'd like that text to be sized at 20px with 1.5 line height, font-weight bold.
Are you saying there's a way to add that via the PHP file?
While I've learned to read and edit PHP over the years, this is a possibility I wasn't aware of, perhaps because I am self taught. I've read up on several different possibilities, but it is hard to know which one will work with, if any,
Please walk me through the steps to publish my heading, "Select Options To See Price."
Thank you,
-Jim Gribble

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
1 year 1 month ago #350007

Hi,

That's correct. When you edit a product you have a "page layout" setting near the bottom to select that new layout you created.

If you look at the code in the view file, you can see a lot of HTML comments (the green text in my screenshot):
i.imgur.com/XPT40Fu.png
These delimit each element you can drag'n'drop in the interface at the top.

The area for the options starts with the tag <!-- OPTIONS --> :
i.imgur.com/vpb0u5y.png
So you can just write your text after that line.
For example:

<!-- OPTIONS -->
Select Options To See Price.
And if you want to add some CSS on this text, then just add a div with a class:
<!-- OPTIONS -->
<div class="myclass">Select Options To See Price.</div>
And then you can add normal CSS like:
.myclass { font-size : 20px; line-height: 1.5 ; font-weight : bold; }

As you can see, it doesn't require knowing PHP, just understanding a bit HTML and CSS.

Last edit: 1 year 1 month ago by nicolas.

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350047

Thank you for this. Fortunately I do know advanced HTML and CSS. But have never used PHP in this way. I take it I just add the style via the custom CSS file?
-Jim Gribble

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
1 year 1 month ago #350059

Yes

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350249

Thanks again for all your help!

Please Log in or Create an account to join the conversation.

Time to create page: 0.065 seconds
Powered by Kunena Forum