Mixing & Matching and Resizing the Video Component

[lesliekirk]

While I can add some CSS (and probably didn't do it quite right while playing) what if I want a smaller sized video player? The mmx-video uses the mmx-hero-component class which is a 100% width. I suspect not everyone is going to want a full width video. Then if I get the half sized video how can I insert a text "block" next to it? Or instead of the Two Across Image Component being two static images, could one be an image and one be a video (or a text block)?

[Jim Cockerham]

Leslie, did you get this working? I am looking to add a video to my homepage.

[lesliekirk]

Leslie, did you get this working? I am looking to add a video to my homepage.

Not yet, I had to step away from it because I was having multiple issues creating the new component file. I think I've got that mastered and then GA4 got in the way.

[lesliekirk]

Leslie, did you get this working? I am looking to add a video to my homepage.

I'm hoping maybe Miva will create this component - a half video half text component would be so awesome, please.

[Keifer Hunniford]

Leslie, Nick has a partner webinar coming up on components, next week I think. Have you received a notification? One of the things he's going to talk about is how simple it is to take an existing component like this and modify it to be a new version of that component. It's more straight forward than you would think.

[lesliekirk]

Leslie, Nick has a partner webinar coming up on components, next week I think. Have you received a notification? One of the things he's going to talk about is how simple it is to take an existing component like this and modify it to be a new version of that component. It's more straight forward than you would think.

I've signed up for it. I've also tried following the examples that Nick has sent me. I'm thinking if y'all can "Leslie-proof" this anyone can do it. I understand part of the concept because it's similar to child themes in WordPress. But then I had to dig and find my own instructions to be able to create a PKG on my Mac. The posted instructions repeatedly failed for me. I work from examples and the one I tried using didn't work for me.

[Nick]

I've signed up for it. I've also tried following the examples that Nick has sent me. I'm thinking if y'all can "Leslie-proof" this anyone can do it. I understand part of the concept because it's similar to child themes in WordPress. But then I had to dig and find my own instructions to be able to create a PKG on my Mac. The posted instructions repeatedly failed for me. I work from examples and the one I tried using didn't work for me.

lesliekirk Flex Components do not require a PKG file they need to be packaged up in a tar.bz2 file.

https://docs.miva.com/miva10/referen...it%20to%20Miva

You should be able to use your command line terminal to accomplish this action.

There is also free software available that will do this action for you.

As for Flex Components in general I would not compare them to a WordPress child theme necessarily, maybe the process to duplicate a component is similar but not the functionality itself.

Flex Components can be as simple as just Miva Template code and no JavaScript. Take a look at this flex component example: https://github.com/mivaecommerce/fle...mparison-table

In the comparison table flex component example you will see that the instance.mvt file has the template code needed to output the values entered by the user in PageBuilder. Then in the ex-comparison-table.js the code is just console logging the values so that you can see how they are being added and is not really needed. Another feature of this component is that it inherits the styles from the site because it is not in a Shadow DOM like the native MMX components.

All this will be gone over in detail during the webinar but I thought I would point you in the right direction.

[lesliekirk]

Nick - like I said, if you can get me to the "ah ha" moment I think I will have a lot of fun with this. I've even tried reaching out to a few other developers and at least I'm not alone in how I feel.

The single command line input didn't quite work for me on my Mac. I used the power of the internet to come up with more detailed instructions that got me a file needed:

Need to create

mmx-image-across-popup.tar.bz2

Go to the folder that the folder needing compressing resides in.

Right click and select New Folder at Terminal

Enter the "tar" command (edit this for the file)

tar -jcvf mmx-image-across-popup.tar.bz2 mmx-image-across-popup


tar cvfj ../mmx-image-across-popup.tar .

Back to my original need. I just wanted to get rid of the snippet of the next item in the carousel from displaying. You had pointed me to the "peek" in the mmx-product-carousel.js which is outputting 'data-peek="75"'

the js file has 2 instances of "peek"

data-peek="${this.getPropValue('peek')}"

Do I change

${this.getPropValue('peek')}

to the value I need?

Then I guess I wait for the webinar to learn all the other places I need to change before I can save the component.

[Bruce - PhosphorMedia]

"You should be able to use your command line terminal to accomplish this action."

You do realize this cuts down the available authorship pool. heck, even i have to switch to two finger typing to do this :)

[Nick]

"You should be able to use your command line terminal to accomplish this action."

You do realize this cuts down the available authorship pool. heck, even i have to switch to two finger typing to do this :)

Here is a link to free software that will do this feature for you with a couple clicks of a mouse :)

https://www.7-zip.org/

[lesliekirk]

Here is a link to free software that will do this feature for you with a couple clicks of a mouse :)

https://www.7-zip.org/

Do you have a link to the version for Mac?

[Nick]

lesliekirk I did a Google search and found these (there are probably more):

https://www.izip.com/
https://www.winzip.com/

But at the end of the day using terminal is probably easier once you have the process setup. You can run a terminal in VS Code so as you update the code you can simply run the command in VS Code.

[lesliekirk]

I need to provide an edited update on my how-to create a compressed file on a Mac:

Need to create

nopeek-product-carousel.tar.bz2

Go to the folder that needs compressing.

Right click and select New Terminal at Folder

Enter the "tar" command (edit this for the file)

tar -cvjSf nopeek-product-carousel.tar.bz2 *



Note: the compressed file will be inside the folder

I have been able to make a copy and get it uploaded. Now to see if I can edit the copy.

[delcorsets]

Nick has a partner webinar coming up on components, next week I think. Have you received a notification? One of the things he's going to talk about is how simple it is to take an existing component like this and modify it to be a new version of that component. It's more straight forward than you would think.

just curious if this webinar happened already? I didn’t see any information about it, and would like to sign up if it’s still upcoming..

[lesliekirk]

It's today in less than an hour