I will help design a new thirty bees theme

[datakick]

15 hours ago, wakabayashi said:

I have coded a very modular way of how a theme should work IMO. In general it adds a Framework in top of TB. Module Developer could save a lot of time and merchants would get a consistent design. But unfortunately it didn't get any real response in "DEV" Channel from TB. Either people are no more around or they are just no interested in creating big changes to an old system.

This is definitely something that would be interesting. I always thought that thirtybees/prestashop is not a real MVC because there is no real (V)iew layer. 

Your idea with reusable elements sounds quite interesting. However, I'm not sure how easily that could be implemented so they would work with all themes. Do you think it's possible?

[led24ee]

I would like to see product code on product listing.

[wakabayashi]

@led24ee I am not yet at product listing part. But why do you want to see the code from there?

My way of doing it will be more modular than now...

@datakick Right now my thing is too raw. But I think it's possible. But in general I believe, that each theme should override this components. I know it's not realistic for old themes, thats why there needs to be a default solution for each component. 

There are two things planned:

1. Elements: This is simple stuff like buttons, lists or up to a spinner. We just standardize the behaviour of classes. A theme needs to tell, which classes will be applied on a "large call to action button". It's easy in achievable in the conig file. I would state there something like "genzo_button large". A theme that relies on bootstrap will set "btn btn-primary btn-large". A Module developer can now use: 

   <a class="{$css_selector.button_primary} {$css_selector.button_large}">Something</a>

   It would throw in the right classes depening on the theme used. 

2. Components: This is stuff that needs a serious markup. For example: lists, tables, cards and so on. Each theme should then deliver his own tpl file to a component. For example a very simple component (card_default) looks like this:

   <div class="">
   	<div class="group block w-full h-auto rounded-lg bg-gray-100 overflow-hidden">
   		<img src="{$component.image.src}" alt="" class="object-cover pointer-events-none group-hover:opacity-75">
   	</div>
   	<p class="heading_section mt-2 ml-2">{$component.section}</p>
   	<p class="ml-2 text-sm text-gray-500">{$component.title}</p>
   </div>

   A bootstrap theme would deliver a very similair markup with different styles ofc. A module dev can now use something like:

           $category_1_data = [
               'title' => 'Azul - Uno - Memoarrr',
               'section' => 'Familienspiele',
               'image' => [
                   'src' => '/img/p/bla.jpg',
               ],
               'link' => [
                   'url' => '/category/link-1',
               ],
           ];
   
           $themeElement = new ThemeHelper(ThemeHelper::COMPONENT_CARD_SIMPLE, $category_1_data, false);
           return $themeElement->fetchElement();

   It will always render a card in the style, that the theme developer initially had in mind. So the design will stay consistent. And obviously the theme developer saves a lot of time as he doesn't need to come up with an own design (that will likely suck on some themes anyway). 
   The card example is of course very simple. There are much more powerful usecases like sliders, modals or whatsever. I am very confident that module devs can reduce their styling work up to 80% or so. Depending on the usecase ofc. 
   
   The usecase of such component wouldn't stop here. They would also be very powerful on pagebuilder or on shortcode modules. 

[led24ee]

7 hours ago, wakabayashi said:

@led24ee I am not yet at product listing part. But why do you want to see the code from there?

 

I have many products with almost the same name. Product code will be quickest way to identify products. Second solution is to rename all products and put something unique in first part of name. But there is 5000+ products, so it will be not easy.

[cienislaw]

1 hour ago, led24ee said:

I have many products with almost the same name. Product code will be quickest way to identify products. Second solution is to rename all products and put something unique in first part of name. But there is 5000+ products, so it will be not easy.

I don't follow... what above info has to do how product listing code looks like?

[wakabayashi]

On 10/8/2021 at 8:32 AM, led24ee said:

I have many products with almost the same name. Product code will be quickest way to identify products. Second solution is to rename all products and put something unique in first part of name. But there is 5000+ products, so it will be not easy.

To be honest, I wouldn't know how my or any other theme could help you in that. You should create a concept of how you want to name your product. In case it's a display thing, you could ofc tweak it a little to your needs. But you could do that already now.

Just want to make sure, that you wont wait on anything, that probably won't help you to solve your problem...

Edited December 2, 2022 by wakabayashi

[datakick]

10 hours ago, wakabayashi said:

@datakick Right now my thing is too raw. But I think it's possible. But in general I believe, that each theme should override this components. I know it's not realistic for old themes, thats why there needs to be a default solution for each component. 

The main issue I have with this concept is the different level of support of these elements/components by themes.

Third party commercial themes would not come with templates for these components at all. Some themes might support only subset of components (maybe new components were introduced after the theme was released).

The only way I can see this to work is for every component to have some default, theme agnostic, template. And this might be hard to do, because such template would not be able to use any framework css, any framework js,...

Themes could, of course, override these default templates. But even if they did not override them, the components would still work to some extent.

Is this aligned with your vision?

[wakabayashi]

24 minutes ago, datakick said:

Is this aligned with your vision?

That's exactly what I thought too. I am not totally sure, if these default compoments aren't allowed to use any framework. I would just mean that we need to make sure that the libary is loaded. Right, the cleanest would be no framework... 

... BUT there is a big question behind it. Do we really want to to build JS components like two range sliders, carousels, accordeon and so on? I highly doubt that's realistic. I haven't found a very good way for this right now. I am myself stuck how I should go. I have some symphaties for AlpineJS, but maybe it's not a good fit for TB. Already the usage of "{" can drive you crazy in smarty files. 

Any ideas from your side?

Edit: the reason why I have some hopes in AlpineJS is actually this: https://alpinejs.dev/patterns

Edited October 8, 2021 by wakabayashi

[wakabayashi]

On 10/8/2021 at 11:17 AM, datakick said:

The main issue I have with this concept is the different level of support of these elements/components by themes.

As you say with "this concept", I wonder: are there any other other concepts that might work?

Note: for me it's not an option to say: oh you all have to use Bootstrap 5 or so.

Edited December 2, 2022 by wakabayashi

[led24ee]

9 hours ago, cienislaw said:

I don't follow... what above info has to do how product listing code looks like?

 

Not programming code. I mean product code or SKU or whatever this name is.

[led24ee]

8 hours ago, wakabayashi said:

To be honest, I wouldn't know how my or any other theme could help you in that. You should create a concept of how you want to name your product. In case it's a display thing, you could ofc tweak it a little to your needs. But you could do that already know.

Just want to make sure, that you want wait on anything, that probably won't help you to solve your problem...

Of course I can customize. And then result is that I will not update, bc sooner or later there are too many things to modify after update. And when there is no update then why do I need donate anything ? But this is maybe little bit hard to understand.

[AndyC]

22 hours ago, led24ee said:

I would like to see product code on product listing.

Isn't it on there already, with Panda it is

If you want to add a Barcode this is what I use ie

 

 
                                       <p id="product_ean13"{if empty($product->ean13) || !$product->ean13} style="display: none;"{/if}>
    <label>{l s='EAN: '} </label>
    <span {if !empty($product->ean13) && $product->ean13} content="{$product->ean13}"{/if}>{$product->ean13|escape:'html':'UTF-8'}</span>
{if $enable_google_rich_snippets}<meta itemprop="gtin13" content="{$product->ean13|escape:'html':'UTF-8'}" />{/if}

     

 

[led24ee]

3 minutes ago, AndyC said:

Isn't it on there already, with Panda it is

If you want to add a Barcode this is what I use ie

 

 
                                       <p id="product_ean13"{if empty($product->ean13) || !$product->ean13} style="display: none;"{/if}>
    <label>{l s='EAN: '} </label>
    <span {if !empty($product->ean13) && $product->ean13} content="{$product->ean13}"{/if}>{$product->ean13|escape:'html':'UTF-8'}</span>
{if $enable_google_rich_snippets}<meta itemprop="gtin13" content="{$product->ean13|escape:'html':'UTF-8'}" />{/if}

     

 

 I have niara. I try not to modify. But with product code I mean this situation when You look not one product but many product in category view. Or product comparison. There is only name and price. So in case there are similar names then You need to click on product to get product code (or SKU or reference or whatever word it is) to get product  unambiguously determined. But there is video from Nemo about this. I will try this. So far looks like it is very hard to make configuration page in BO where You can determine what info is visible on product page.

[wakabayashi]

{$product.reference} or {$product->reference} is probably the thing you are looking for. 

[led24ee]

On 10/8/2021 at 10:22 PM, wakabayashi said:

{$product.reference} or {$product->reference} is probably the thing you are looking for. 

Thanks. I will try.

 

 

Well. I finally got it work.

Edited October 9, 2021 by led24ee
update

[wakabayashi]

I have now started, to develop a front office module, thats implements a "framework" for thirty bees. Technically this is not super complex and it works already quite good. But if this should become the new standard in thirty bees, I need some help. We will need to design default styles. Who is ready to help on this project?

What you knowledge do you need?

1. (very) good knowledge of CSS
2. Been able to work on tpl files. So you need HTML knowledge and basic knowledge in how to use {$any_random_variable}. 
3. Knowledge in JS doesn't harm either, but a lot of elements/components don't need JS at all.

Of course I would give more informations in detail, what has to be done. Note: this is not a 20 minutes job. I expect that it takes multiple hours to "code" a clean responsive component.

@datakick is there any theme, that can be considered as the standard theme for tb? Is it niara? IMO the default styles of the framework should match well with the default theme. Obviously we will strike for some subtle design, that looks on all themes decent. 

[led24ee]

I haven't much experience. So when I try something it will take long time. But, I can try.

[Beeta]

@wakabayashi this is great

have you done some steps forward?
Sadly I don't have expertise to help, sorry. 😞

[wakabayashi]

I was working very hard on it and it looked quite promising. But last two months I haven't had time to work on. End of the year I never have time for such big projects due to christmas sale. 

I will go on in spring. I hope, that I can launch my new theme in summer/autumn 2022.

[wakabayashi]

19 hours ago, Ethan92 said:

End of the year I never have time for such big projects due to christmas sale. 

Haha right. My own theme has also been postopened to 2023... 🙃

[wakabayashi]

I am still working days (and nights) to push my theme forward. The progress is quite amazing. IMO there is no doubt, that we should go for FrontEnd component system. This in combination with fast ajax requests can lead to a damn good result. And the good: the core needs almost no adjustments. I have only a few very simple overrides...

Here is a sneak preview of a fast customer journey:

I work often with modals. This gives a much better user experience (especially on mobile devices). But in general it's all about the usage of predefined components: https://www.genzo.ch/tb-framework
Here you can see the module "tb_framework". As you click through the Elements/Components you will see a lot of elements, that you saw in the video. Any theme/module can use these components as well. 

I won't publish my theme/components as they should be unique for my store. But I could open source the technique behind it. Especially the "tb_framework" module. Steps to get a similair result like mine:

1. Somebody builds default components for "tb_framework". Best would be without any framework. Actually I did mine only with TailwindCSS, which means, that it's also possible without any at all. Only exception might be slider functionality. (Ofc I could support this task with my components).
2. A new theme from scratch is created (or maybe existing cisero), that implements the components from "tb_framework". For the theme imo any framework can be used.
3. Core modules are adjusted to use components from "tb_framework" module. (This is not too hard and actually quite fun)

My opinion: As this is damn much work, I don't think we will find one guy, that makes this in his free time. A crowdfunding might be needed.

Edited December 2, 2022 by wakabayashi

[30knees]

I'd like to follow-up on wakabayashi's question.

On 10/11/2021 at 1:19 PM, wakabayashi said:

@datakick is there any theme, that can be considered as the standard theme for tb? Is it niara? IMO the default styles of the framework should match well with the default theme. Obviously we will strike for some subtle design, that looks on all themes decent. 

And regarding this question:

On 10/11/2021 at 1:19 PM, wakabayashi said:

I have now started, to develop a front office module, thats implements a "framework" for thirty bees. Technically this is not super complex and it works already quite good. But if this should become the new standard in thirty bees, I need some help. We will need to design default styles. Who is ready to help on this project?

What you knowledge do you need?

1. (very) good knowledge of CSS
2. Been able to work on tpl files. So you need HTML knowledge and basic knowledge in how to use {$any_random_variable}. 
3. Knowledge in JS doesn't harm either, but a lot of elements/components don't need JS at all.

I don't have any knowledge but I can help finance the development if this were to become the tb default. 

[wakabayashi]

While I make actually pretty good progress on my own theme, I want to make official, that it won't ever get published. I always stated, that it's unlikely, but in the recent weeks/days I understood, that it's completly unrealistic. Just wanted to tell as I got PMs from time to time about the state of it. So please don't wait for it. I guess Niara or Cisero is the way to go. 😉

[the.rampage.rado]

I hope you stick to TB!

[wakabayashi]

1 hour ago, the.rampage.rado said:

I hope you stick to TB!

Sure. There is no plan to switch the software. 🙂

I am just in a dead end atm and it's hard to find out. So I reduce all (possible) workload around it. And I don't like, if people put hopes on something, that never will happen, so I prefer to inform about it.